<template>
	<div>
		<el-row>
			<el-col :span="17" class=" border-right">
				<div class="padding border-bottom">
					<font-awesome-icon :icon="['fas', 'volume-up']" class="text-blue" />
					<span class="text-gray m-l-10">是一款基于css框架的网页字体图标库,它完全免费... 最新的4.7.0版,收录了675个图标</span>
				</div>

				<el-row>
					<el-col :span="12" class="padding">
						<h4 class="title border-bottom">案例服务——TSSC</h4>
						<div class="text-blue">总交易量</div>
						<el-row>
							<el-col :span="16" style="padding-top: 15px;">
								<span class="text-large">50.452</span>
								笔
							</el-col>
							<el-col :span="8">
								<div>
									TPS:
									<span class="text-blue">3</span>
									笔/秒
								</div>
								<div>
									TPS:
									<span class="text-blue">3</span>
									笔/秒
								</div>
								<div>
									TPS:
									<span class="text-blue">3</span>
									笔/秒
								</div>
								<div>
									TPS:
									<span class="text-red">123123</span>
								</div>
							</el-col>
						</el-row>
						<div class="text-blue m-t-10">交易趋势</div>
						<div>图表</div>
					</el-col>
					<el-col :span="12" class="padding">
						<h4 class="title border-bottom">密钥服务——KMS</h4>
						<el-row>
							<el-col :span="3"><font-awesome-icon :icon="['fas', 'key']" class="text-blue" style="font-size: 30px; margin-top: 36px;" /></el-col>
							<el-col :span="13">
								<div style="margin-top: 24px;">对称密钥</div>
								<div class="m-t-10">
									总数量:
									<span style="font-size: 20px;">15,879</span>
								</div>
							</el-col>
							<el-col :span="3">
								<div class="m-t-10">AES</div>
								<div class="m-t-10">SM4</div>
								<div class="m-t-10">DES</div>
							</el-col>
							<el-col :span="5" class="text-right">
								<div class="m-t-10">
									<span class="text-blue">0</span>
									个
								</div>
								<div class="m-t-10">
									<span class="text-blue">345</span>
									个
								</div>
								<div class="m-t-10">
									<span class="text-blue">12,485</span>
									个
								</div>
							</el-col>
						</el-row>

						<el-row style="margin-top: 20px;">
							<el-col :span="3"><font-awesome-icon :icon="['fas', 'key']" class="text-blue" style="font-size: 30px; margin-top: 36px;" /></el-col>
							<el-col :span="13">
								<div style="margin-top: 24px;">非对称密钥</div>
								<div class="m-t-10">
									总数量:
									<span style="font-size: 20px;">27</span>
								</div>
							</el-col>
							<el-col :span="3">
								<div style="margin-top: 30px;">SM2</div>
								<div class="m-t-10">RAS</div>
							</el-col>
							<el-col :span="5" class="text-right">
								<div style="margin-top: 30px;">
									<span class="text-blue">0</span>
									个
								</div>
								<div class="m-t-10">
									<span class="text-blue">12</span>
									个
								</div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
				<el-row style="margin-top: 20px;">
					<el-col :span="12" class="padding">
						<h4 class="text-center">交易信息统计</h4>
						<el-table :data="tableData" border stripe style="width: 100%" height="300">
							<el-table-column prop="date" label="平台" width="180"></el-table-column>
							<el-table-column prop="name" label="今日交易量" width="180"></el-table-column>
							<el-table-column prop="address" label="历史交易量"></el-table-column>
						</el-table>
					</el-col>
					<el-col :span="6" class="padding">
						<h4 class="text-center">今日交易量排行</h4>
						<el-table :data="tableData" border stripe style="width: 100%" height="300">
							<el-table-column prop="date" label="平台" width="180"></el-table-column>
							<el-table-column prop="name" label="今日交易量" width="180"></el-table-column>
							<el-table-column prop="address" label="历史交易量"></el-table-column>
						</el-table>
					</el-col>
					<el-col :span="6" class="padding">
						<h4 class="text-center">历史交易量排行</h4>
						<el-table :data="tableData" border stripe style="width: 100%" height="300">
							<el-table-column prop="date" label="平台" width="180"></el-table-column>
							<el-table-column prop="name" label="今日交易量" width="180"></el-table-column>
							<el-table-column prop="address" label="历史交易量"></el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-col>

			<el-col :span="7" class="padding">
				<h4 class="title m-0">
					<font-awesome-icon :icon="['fas', 'exclamation-circle']" class="text-red" />
					告警列表
				</h4>
				<el-row>
					<el-col :span="12" class="padding">
						告警总数：
						<span class="text-red">123</span>
					</el-col>
					<el-col :span="12" class="padding">
						警告：
						<span class="text-yellow">123</span>
					</el-col>
				</el-row>
				
				<div class="border m-t-10 padding">
					<div class="">2020-01-01 12:00:00 <strong class="m-l-10">持续:34:11:35</strong></div>
					<div class="text-gray m-t-10">asdfa sdfa sdf124 2342 342341</div>
				</div>
				<div class="border m-t-10 padding">
					<div class="">2020-01-01 12:00:00 <strong class="m-l-10">持续:34:11:35</strong></div>
					<div class="text-gray m-t-10">asdfa sdfa sdf124 2342 342341</div>
				</div>
				<div class="border m-t-10 padding">
					<div class="">2020-01-01 12:00:00 <strong class="m-l-10">持续:34:11:35</strong></div>
					<div class="text-gray m-t-10">asdfa sdfa sdf124 2342 342341</div>
				</div>
				<div class="border m-t-10 padding">
					<div class="">2020-01-01 12:00:00 <strong class="m-l-10">持续:34:11:35</strong></div>
					<div class="text-gray m-t-10">asdfa sdfa sdf124 2342 342341</div>
				</div>
				<div class="border m-t-10 padding">
					<div class="">2020-01-01 12:00:00 <strong class="m-l-10">持续:34:11:35</strong></div>
					<div class="text-gray m-t-10">asdfa sdfa sdf124 2342 342341</div>
				</div>
				<div class="border m-t-10 padding">
					<div class="">2020-01-01 12:00:00 <strong class="m-l-10">持续:34:11:35</strong></div>
					<div class="text-gray m-t-10">asdfa sdfa sdf124 2342 342341</div>
				</div>
				<div class="border m-t-10 padding">
					<div class="">2020-01-01 12:00:00 <strong class="m-l-10">持续:34:11:35</strong></div>
					<div class="text-gray m-t-10">asdfa sdfa sdf124 2342 342341</div>
				</div>
				<div class="border m-t-10 padding">
					<div class="">2020-01-01 12:00:00 <strong class="m-l-10">持续:34:11:35</strong></div>
					<div class="text-gray m-t-10">asdfa sdfa sdf124 2342 342341</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [
				{
					date: '2016-05-02',
					name: '王小虎',
					address: 'asdf'
				},
				{
					date: '2016-05-04',
					name: '王小虎',
					address: 'asdf'
				},
				{
					date: '2016-05-01',
					name: '王小虎',
					address: 'asdf'
				},
				{
					date: '2016-05-03',
					name: '王小虎',
					address: 'asdfasdfasdf'
				}
			]
		};
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
	height: 40px;
	line-height: 40px;
	color: #303133;
}

.text-large {
	font-size: 36px;
}
</style>
